<template>
  <div>
    <!--  顶部轮播  -->
    <div class="row">
      <div class="col">
        <div id="carouselExampleIndicators" class="carousel slide rounded-1 overflow-hidden" data-bs-ride="carousel">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                    aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                    aria-label="Slide 2"></button>
          </div>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="/img/a1.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="/img/a2.jpg" class="d-block w-100" alt="...">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                  data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                  data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
    </div>
    <!--  主体内容  -->
    <div class="row mt-4">
      <div class="col-sm-12 col-md-6">
        <div class="card mb-3">
          <div class="card-header border-0"><span class="iconfont icon-xinwengonggao"></span>大赛新闻</div>
          <div class="card-body" style="font-size: 14px">
            <template v-if="Notice.length!==0">
              <template v-for="el in Notice">
                <div v-bind:key=el._id class="card-text d-flex justify-content-between">
                  <div class="text-truncate navTo">
                    <span @click="detail(el)">{{ el.name }}</span>
                  </div>
                  <div style="width: 180px;text-align: right">{{ el.updateTime|NoticeTime }}</div>
                </div>
              </template>
            </template>
            <template v-else>
              <el-empty description="暂无公告消息"></el-empty>
            </template>
          </div>
        </div>
      </div>
      <div class="col-sm-12 col-md-6 mt-sm-3 mt-md-0">
        <div class="card" style="font-size: 14px">
          <div class="card-header border-0"><span class="iconfont icon-xinwengonggao"></span>竞赛消息</div>
          <div class="card-body">
            <template v-if="warningData.length!==0">
              <div class="overflow-hidden">
                <vue-seamless-scroll
                    :data="warningData"
                    :class-option="classOption">
                  <div class="rows" v-for="(item, index) in warningData" :key="index">
                    <div class="col d-flex justify-content-between" :style="`color: ${item.color}`">
                      <span class="team-info" @click="NavTo(item.id)">{{ item.info }}</span>
                      <span>{{ item.updateTime|time }}</span>
                    </div>
                  </div>
                </vue-seamless-scroll>
              </div>
            </template>
            <template v-else>
              <el-empty description="暂无竞赛消息"></el-empty>
            </template>
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-2">
      <div class="col">
        <p class="fs-4 text-center">热门竞赛</p>
      </div>
    </div>

    <div class="row mt-sm-2 g-2">
      <template v-if="contestData.length!==0">
        <template v-for="(el,index) in contestData">
          <div style="cursor: pointer" v-bind:key="index" @click="ContestDetail(el._id._id[0])" class="col-md-4 col-sm-12">
            <div class="card">
              <img :src="'http://127.0.0.1'+JSON.parse(el._id.img[0]).path" height="200" alt="...">
              <div class="card-body">
                <h5 class="card-title">{{ el.name }}</h5>
                <p class="card-text text-secondary">
                  <span class="iconfont icon-tuanduihezuo me-1"></span>参赛人数：<span
                    style="color: #40aaff">{{ el.count }}</span>&emsp;<span>类型：{{el._id.raceType[0]|raceType}}</span>&emsp;<span>类别：{{el._id.genre[0]}}</span>
                </p>
              </div>
            </div>
          </div>
        </template>
      </template>
      <template v-else>
        <div class="col">
          <el-empty class="border" description="暂无热门竞赛"></el-empty>
        </div>
      </template>
    </div>

    <div class="row mt-3">
      <div class="col">
        <p class="fs-4 text-center">精彩记录</p>
      </div>
    </div>
    <div class="row mb-3">
      <div class="col">
        <template v-if="advData.length!==0">
          <div id="adv" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
              <template v-for="(el,index) in advData">
                <div v-bind:key="el._id" :class="'carousel-item '+index===0?'active':''">
                  <img :src="'http://127.0.0.1/'+JSON.parse(el.path).path" class="d-block w-100" alt="...">
                </div>
              </template>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
        </template>
        <template v-else>
          <el-empty class="border" description="暂无公告消息"></el-empty>
        </template>
      </div>
    </div>

  </div>
</template>

<script>
import user from "../api/user";
import NoticeTime from "../filter/NoticeTime";
import admin from "../api/admin";
import vueSeamlessScroll from 'vue-seamless-scroll'
import time from "../filter/time";
import raceType from "../filter/raceType";
export default {
  name: "Home",

  data() {
    return {
      limit: 10,
      skip: 0,
      img: ['a1.jpg', 'a2.jpg'],
      Notice: [],
      contestData: [],
      advData: [],
      classOption: {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000
      }, warningData: [{}]
    }
  },
  components: {
    vueSeamlessScroll
  },
  filters: {
    NoticeTime,
    time,raceType
  },
  mounted() {
    this.GetNotice()
    this.GetContest()
    this.GetAdv()
    this.GetTeamMessage()
  },
  methods: {
    NavTo(id) {
      localStorage.setItem("id",JSON.stringify(id))
      this.$router.push("/TeamDetail")
    },
    GetTeamMessage() {
      user.GetUserAllTeam().then(r => {
        if (r.data.data.tm.length !== 0 && r.data.status === "200") {
          let data = []
          r.data.data.tm.forEach(v => {
            data.push({
              info: v.user[0].name + "发起了竞赛组队" + `(${v.name})点击查看`,
              color: '#38aae1',
              id: v._id,
              updateTime: v.updateTime
            })
          })
          this.warningData = data
        }
      })
    },
    GetAdv() {
      admin.GetAdv().then(r => {
        this.advData = r.data.data.adv
      })
    },
    detail(el) {
      localStorage.setItem("NoticeDetail", JSON.stringify(el))
      this.$router.push("/NoticeDetail")
    },
    ContestDetail(id) {
      localStorage.setItem("detailId", JSON.stringify(id))
      this.$router.push("/detail")
    },
    GetContest() {
      const param = {
        limitNum: 3,
        skipNum: 0
      }
      user.GetHot(param).then(r => {
        this.contestData = r.data.data.apply
        console.log(this.contestData)
      })
    },
    GetNotice() {
      const param = {
        limit: this.limit,
        skip: this.skip
      }
      user.GetNotice(param).then(r => {
        this.Notice = r.data.data.data
      })
    }
  }
}
</script>

<style scoped>
.navTo:hover {
  color: #40aaff;
  cursor: pointer;
  text-decoration: underline;
}

.icon-tuanduihezuo {
  font-size: 23px;
}

.team-info:hover {
  text-decoration: underline;
  cursor: pointer;
}
</style>